<template>

  <div id="login">
    <div class="zhongjianbox">
      <div style="flex:1;text-align: center;">
        <img style="height: 100%;"  src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/bd_iiccon-green.png" alt="">
      </div>
      <div class="boxFath">
        <div style="text-align: center;">
          <img style="width: 60%;"  src="https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/logo.png" alt="">
        </div>
        <div class="boxSon" style="">
        <p style=" text-align: center;">舍弗勒-安保管理系统</p>

        <a-form
          class="formLogin"
          :form="form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              :disabled="disabledJudge"
              v-decorator="[
            'userName',
            { rules: [{ required: true, message: '请输入账号' }] },
          ]"
              placeholder="请输入账号"
              @keyup.enter.native="passwordFocus()"
              autoComplete="off"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              ref="password"
              :disabled="disabledJudge"
              v-decorator="[
            'password',
            { rules: [{ required: true, message: '请输入密码' }] }
          ]"
              type="password"
              placeholder="请输入密码"
            >
              <!--,{ min: 8, message: '请输入不少于8位的密码' },-->
              <!--{ pattern: '^[a-zA-Z0-9]*$', message: '请输入数字、字母组合的密码'}-->
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input-password>
          </a-form-item>

          <div  style="position: relative">
            <!-- 图片验证码 -->
            <div class="posSon">
              <span style="height: 30px;">
                <img id="imgid" :src="verificationImage" style="height: 28px" onClick="this.src=this.src+'?'+Math.random()">
              </span>
            </div>
            <a-form-item>
              <a-input
                :disabled="disabledJudge"
                v-decorator="[
              'verificationCode',
              { rules: [{ required: true, message: '请输入验证码' }] },
            ]"
                placeholder="请输入验证码"
                autoComplete="off"
              />

            </a-form-item>
          </div>

          <a-button type="primary" html-type="submit" style="width: 100%" :loading="loadingLogin">
            <span v-if="loadingLogin">登录中...</span>
            <span v-else>登录</span>

          </a-button>
        </a-form>
        </div>


      </div>
    </div>

    <p style="position: absolute;bottom: 10px;font-size: 12px;color: #666;width: 100%;
 text-align: center;">技术支持：上海步达信息科技有限公司</p>

  </div>
</template>

<script>
  // 获取登录接口
  import loginApi from "@/api/login";
  import cfg from '@/config/config'

  export default {
    name: "",
    data() {
      return {
        verificationImage: cfg.apiUrl + 'api/visitor/verification',
        loadingLogin: false,
        disabledJudge: false,
        username: null,
        password: null,
        passwordRequired: true,
        passwordMessage: '请输入密码!',
        activeId: 2, //默认 1 域登录  2工号登录
        verificationCode:""
      };
    },
    mounted() {
      // 加载页面时重载验证码
      document.getElementById("imgid").click();
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'normal_login' });
      localStorage.setItem("user", JSON.stringify({}));
      this.$store.state.user = {};
    },

    methods: {
      handleSubmit(e) {
        let _this = this;
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            _this.username = values.userName;
            _this.password = values.password;
            _this.verificationCode = values.verificationCode;
            _this.submit();
          }
        });
      },

      passwordFocus(){
        this.$refs.password.focus();
      },
      async submit() {
        //验证登录名称  密码不为空
        // console.log(this.username)
        // console.log(this.password)
        this.disabledJudge = true;
        this.loadingLogin = true;
        let param = {
          username: this.username.trim(),
          password: this.password.trim(),
          activeId: 2, //1 域登录  2工号登录
          verificationCod: this.verificationCode.toUpperCase()
        };
        //调用后台方法
        let res = await loginApi.userLogin(param);
        // console.log(res)
        if (res.data.success) {
          // console.log(res.data.result.menuList[0].children[0].path);
          localStorage.setItem("openKeys", res.data.result.menuList[0].path);
          this.$store.commit('addSelectedKeys',res.data.result.menuList[0].children[0].path);
          localStorage.setItem("selectedKeys", JSON.stringify(res.data.result.menuList[0].children[0].path))
          localStorage.setItem("user", JSON.stringify({
            userNO: res.data.result.userNO,
            userName: res.data.result.userName,
            userSerial: res.data.result.userSerial
          }));
          this.$store.state.user.userNO = res.data.result.userNO;
          this.$store.state.user.userName = res.data.result.userName;
          this.$store.state.user.userSerial = res.data.result.userSerial;
          this.$store.state.menuList = res.data.result.menuList;
          this.$store.commit("changeMenuList",res.data.result.menuList);
          localStorage.setItem("state", JSON.stringify(this.$store.state));

          this.$nextTick(()=>{
            this.$router.replace(`/${res.data.result.menuList[0].children[0].path}`);
          })
        } else {
          this.loadingLogin = false;
          this.disabledJudge = false;
          document.getElementById("imgid").click();
          this.$message.error(res.data.message);
          this.form.setFieldsValue({
            verificationCode: "",
          });
        }

      },


    }
  };
</script>

<style scoped>
  #login {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 560px;
    min-width: 1300px;
    overflow: auto;
  }

  .zhongjianbox{
    width: 100%;
    height: 400px;
    position: absolute;
    top: 50%;
    margin-top: -200px;
    display: flex;
  }
  .boxFath{
    width: 340px;
    margin-right: 10%;
    float: right;
    margin-top: -50px;
  }
  .boxSon{
    padding: 30px;
    font-size: 20px;
    background-color: #ffffff;
  }

  @media screen and (min-width:1340px){
    #login{
      background:   url(https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/bodybg-green.jpg) no-repeat center center;
      background-size: cover;
    }
  }
  @media screen and (max-width:1339px){
    #login{
      background: url(https://digitalsecurity.oss-cn-hangzhou.aliyuncs.com/visit/static/img/bodybg-green2.jpg) no-repeat center center;
      background-size: cover;
    }
  }


</style>

